<template>
  <div class="consultation-page">
    <div class="navbar">
      <div class="nav-back" @click="$router.go(-1)">
        <i class="fas fa-chevron-left"></i>
      </div>
      <div class="nav-title">预约咨询</div>
      <button class="filter-toggle-btn" @click="toggleFilterPanel">
        <i class="fas fa-filter"></i>
        筛选
      </button>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <!-- 时间筛选 -->
      <div class="time-filter">
        <button
          :class="['filter-btn', dateValid === 'N' ? 'active' : '']"
          @click="setDateValid('N')"
        >
          全部咨询师
        </button>
        <button
          :class="['filter-btn', dateValid === 'Y' ? 'active' : '']"
          @click="setDateValid('Y')"
        >
          一周内有时间
        </button>
      </div>

      <!-- 类别筛选 - 改为滑动式 -->
      <div class="category-filter-container">
        <div class="category-filter" ref="categoryFilter">
          <!-- 全部类别按钮 -->
          <button
            :class="['category-btn', activeCategory === 'all' ? 'active' : '']"
            @click="setCategoryFilter('all')"
          >
            全部类别
          </button>
          <!-- 动态渲染主题 -->
          <button
            v-for="topic in topics"
            :key="topic.actualName"
            :class="[
              'category-btn',
              activeCategory === topic.actualName ? 'active' : '',
            ]"
            @click="setCategoryFilter(topic.actualName)"
          >
            {{ topic.displayName }}
          </button>
        </div>
      </div>
    </div>

    <!-- 筛选面板 -->
    <div class="filter-panel" :class="{ active: showFilterPanel }">
      <div class="filter-panel-overlay" @click="closeFilterPanel"></div>
      <div class="filter-panel-content">
        <div class="filter-panel-header">
          <h3>筛选条件</h3>
          <button class="close-btn" @click="closeFilterPanel">
            <i class="fas fa-times"></i>
          </button>
        </div>

        <div class="filter-panel-body">
          <!-- 城市筛选 -->
          <div class="filter-item">
            <label class="filter-label">城市</label>
            <input
              v-model="filters.city"
              type="text"
              class="filter-input"
              placeholder="请输入城市名称"
            />
          </div>

          <!-- 姓名筛选 -->
          <div class="filter-item">
            <label class="filter-label">姓名</label>
            <input
              v-model="filters.name"
              type="text"
              class="filter-input"
              placeholder="请输入咨询师姓名"
            />
          </div>

          <!-- 咨询年龄筛选 -->
          <div class="filter-item">
            <label class="filter-label">咨询年龄</label>
            <select v-model="filters.age" class="filter-select">
              <option value="">不限</option>
              <option value="90后">90后</option>
              <option value="80后">80后</option>
              <option value="70后">70后及其他</option>
            </select>
          </div>

          <!-- 咨询方式筛选 -->
          <div class="filter-item">
            <label class="filter-label">咨询方式</label>
            <select v-model="filters.consultType" class="filter-select">
              <option value="">不限</option>
              <option value="电话咨询">电话咨询</option>
              <option value="视频咨询">视频咨询</option>
            </select>
          </div>

          <!-- 性别筛选 -->
          <div class="filter-item">
            <label class="filter-label">性别</label>
            <div class="gender-filter">
              <label class="gender-option">
                <input
                  type="radio"
                  v-model="filters.gender"
                  value=""
                  class="gender-radio"
                />
                <span class="gender-label">不限</span>
              </label>
              <label class="gender-option">
                <input
                  type="radio"
                  v-model="filters.gender"
                  value="男"
                  class="gender-radio"
                />
                <span class="gender-label">男</span>
              </label>
              <label class="gender-option">
                <input
                  type="radio"
                  v-model="filters.gender"
                  value="女"
                  class="gender-radio"
                />
                <span class="gender-label">女</span>
              </label>
            </div>
          </div>

          <!-- 预约日期筛选 -->
          <div class="filter-item">
            <label class="filter-label">预约日期</label>
            <input
              v-model="filters.planDate"
              type="date"
              class="filter-input"
              placeholder="选择预约日期"
            />
          </div>

          <!-- 时间段筛选 -->
          <div class="filter-item">
            <label class="filter-label">时间段</label>
            <select v-model="filters.planTime" class="filter-select">
              <option value="">不限</option>
              <option value="07:00-12:00">07:00-12:00</option>
              <option value="12:00-18:00">12:00-18:00</option>
              <option value="18:00-24:00">18:00-24:00</option>
            </select>
          </div>

          <!-- 主题筛选 -->
          <div class="filter-item">
            <label class="filter-label">咨询主题</label>
            <select v-model="filters.topic" class="filter-select">
              <option value="">不限</option>
              <option
                v-for="topic in topics"
                :key="topic.actualName"
                :value="topic.actualName"
              >
                {{ topic.displayName }}
              </option>
            </select>
          </div>
        </div>

        <div class="filter-panel-footer">
          <button class="reset-btn" @click="resetFilters">重置</button>
          <button class="confirm-btn" @click="applyFilters">确认筛选</button>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading && consultants.length === 0" class="loading-container">
      <div class="loading-spinner"></div>
      <span>加载中...</span>
    </div>

    <!-- 咨询师列表 -->
    <div class="consultant-list" v-if="!loading || consultants.length > 0">
      <div
        v-for="consultant in consultants"
        :key="consultant.id"
        class="consultant-card"
      >
        <div class="card-content">
          <!-- 左侧头像 -->
          <div class="left-section">
            <div class="avatar-container">
              <img
                :src="consultant.imgUrl"
                :alt="consultant.name"
                class="consultant-avatar"
                @error="handleImageError"
              />
              <div
                class="online-indicator"
                :class="consultant.planNum > 0 ? 'online' : 'offline'"
              ></div>
            </div>
          </div>

          <!-- 中间详细信息 -->
          <div class="middle-section">
            <div class="name-section">
              <h3 class="consultant-name">{{ consultant.name }}</h3>
              <span class="consultant-level">
                {{
                  consultant.certificateList && consultant.certificateList[0]
                    ? consultant.certificateList[0]
                    : "咨询师"
                }}
              </span>
            </div>

            <div class="info-grid">
              <div class="info-item">
                <i class="fas fa-clock info-icon"></i>
                <span class="info-text"
                  >{{ consultant.consultTime }}+小时咨询经验</span
                >
              </div>
              <div class="info-item">
                <i class="fas fa-graduation-cap info-icon"></i>
                <span class="info-text"
                  >{{ consultant.trainTime }}+小时培训</span
                >
              </div>
              <div class="info-item">
                <i class="fas fa-briefcase info-icon"></i>
                <span class="info-text"
                  >{{ consultant.workingTime }}+年从业经验</span
                >
              </div>
            </div>

            <div class="expertise-section">
              <span class="section-label">擅长主题：</span>
              <div class="expertise-tags">
                <span
                  v-for="(domain, index) in consultant.domainList.slice(0, 3)"
                  :key="index"
                  class="expertise-tag"
                >
                  {{ domain }}
                </span>
                <span
                  v-if="consultant.domainList.length > 3"
                  class="expertise-tag"
                  >...</span
                >
              </div>
            </div>

            <div class="message-section" v-if="consultant.introduction">
              <span class="section-label">咨询师想说：</span>
              <p class="consultant-message">{{ consultant.introduction }}</p>
            </div>
          </div>

          <!-- 右侧城市信息 -->
          <div class="right-section">
            <div class="city-info">
              <i class="fas fa-map-marker-alt city-icon"></i>
              <span class="city-text">{{ consultant.city || "未知地点" }}</span>
            </div>
          </div>
        </div>

        <!-- 底部预约区域 -->
        <div class="bottom-section">
          <div class="availability-info">
            <div class="fastest-time">
              <span class="time-label">最快可约：</span>
              <span class="time-value">{{
                consultant.fastTime || "暂无时间"
              }}</span>
            </div>
            <div
              class="availability-tag"
              :class="consultant.planNum > 0 ? 'available' : 'unavailable'"
            >
              {{ consultant.planNum > 0 ? "可预约" : "暂不可约" }}
            </div>
          </div>

          <button
            @click="goToConsultantDetail(consultant.id)"
            class="book-btn"
            :disabled="consultant.planNum <= 0"
          >
            {{ consultant.planNum > 0 ? "立即预约" : "暂不可约" }}
          </button>
        </div>
      </div>

      <!-- 加载更多 -->
      <div v-if="loading && consultants.length > 0" class="loading-more">
        <div class="loading-spinner small"></div>
        <span>加载中...</span>
      </div>

      <!-- 没有更多数据 -->
      <div v-if="!hasMore && consultants.length > 0" class="no-more-data">
        没有更多了
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="!loading && consultants.length === 0" class="empty-state">
      <i class="fas fa-users"></i>
      <p>暂无咨询师数据</p>
    </div>
  </div>
</template>

<script>
import { getConsultantList, topics } from "@/api/user";

export default {
  name: "ConsultationPage",
  data() {
    return {
      isActive: true, // 页面激活状态
      dateValid: "N", // 全部咨询师N, 一周内有时间Y
      activeCategory: "all",
      showScrollIndicator: true,
      // 移除写死的categories，使用接口返回的topics
      topics: [], // 存储接口返回的主题数据
      consultants: [],
      loading: false,
      hasMore: true,
      currentPage: 1,
      pageSize: 10,
      totalPages: 0,
      // 添加滚动防抖
      scrollTimeout: null,

      // 筛选相关数据
      showFilterPanel: false,
      filters: {
        city: "",
        name: "",
        age: "",
        consultType: "",
        gender: "",
        planDate: "", // 预约日期
        planTime: "", // 预约时间段
        topic: "", // 新增主题筛选
      },
    };
  },
  mounted() {
    this.isActive = true;
    this.getConsultantTopics();
    this.getConsultantList();
    this.checkScrollIndicator();
    window.addEventListener("resize", this.checkScrollIndicator);
    window.addEventListener("scroll", this.handleScroll);
  },

  beforeUnmount() {
    this.cleanupEvents();
  },
  methods: {
    cleanupEvents() {
      window.removeEventListener("resize", this.checkScrollIndicator);
      window.removeEventListener("scroll", this.handleScroll);
      this.isActive = false;
    },
    getConsultantTopics() {
      let data = { unitId: localStorage.getItem("unitId") };
      topics(data).then((res) => {
        if (res.code === 200) {
          // 将接口返回的主题数据赋值给topics
          this.topics = res.data;
        }
      });
    },
    // 切换筛选面板显示
    toggleFilterPanel() {
      this.showFilterPanel = !this.showFilterPanel;
    },

    // 关闭筛选面板
    closeFilterPanel() {
      this.showFilterPanel = false;
    },

    // 重置筛选条件
    resetFilters() {
      this.filters = {
        city: "",
        name: "",
        age: "",
        consultType: "",
        gender: "",
        planDate: "",
        planTime: "",
        topic: "",
      };
      // 重置后重新获取数据
      this.currentPage = 1;
      this.getConsultantList();
    },

    // 应用筛选条件
    applyFilters() {
      this.closeFilterPanel();
      // 重置页码并重新获取数据
      this.currentPage = 1;
      this.getConsultantList();
    },

    // 构建请求参数
    buildRequestParams(isLoadMore = false) {
      const pageNo = isLoadMore ? this.currentPage + 1 : 1;

      const params = {
        dateValid: this.dateValid,
        pageNo: pageNo,
        pageSize: this.pageSize,
      };

      // 添加筛选参数
      if (this.filters.city) params.city = this.filters.city;
      if (this.filters.name) params.name = this.filters.name;
      if (this.filters.age) params.age = this.filters.age;
      if (this.filters.consultType)
        params.consultType = this.filters.consultType;
      if (this.filters.gender) params.gender = this.filters.gender;
      if (this.filters.planDate) params.planDate = this.filters.planDate;
      if (this.filters.planTime) params.planTime = this.filters.planTime;
      if (this.filters.topic) params.topic = this.filters.topic;

      // 添加分类筛选参数（如果不是"全部"）
      if (this.activeCategory !== "all") {
        // 使用actualName作为筛选参数
        params.tags = this.activeCategory;
      }

      return params;
    },

    // 获取咨询师列表
    async getConsultantList(isLoadMore = false) {
      if (!this.isActive || this.loading) return; // 页面不活跃时不请求

      this.loading = true;
      try {
        const params = this.buildRequestParams(isLoadMore);
        const res = await getConsultantList(params);
        if (res.code === 200 && this.isActive) {
          // 确认页面还活跃
          const newConsultants = res.data.records.map((consultant) => ({
            ...consultant,
            available: consultant.planNum > 0,
          }));

          if (isLoadMore) {
            this.consultants = [...this.consultants, ...newConsultants];
            this.currentPage = params.pageNo;
          } else {
            this.consultants = newConsultants;
            this.currentPage = 1;
          }

          this.totalPages = res.data.pages;
          this.hasMore = params.pageNo < res.data.pages;
        }
      } catch (error) {
        console.error("获取咨询师列表失败:", error);
      } finally {
        this.loading = false;
      }
    },

    // 加载更多
    loadMore() {
      if (this.hasMore && !this.loading) {
        this.getConsultantList(true);
      }
    },

    // 滚动处理 - 修复重复调用问题
    handleScroll() {
      if (this.scrollTimeout) {
        clearTimeout(this.scrollTimeout);
      }

      this.scrollTimeout = setTimeout(() => {
        const scrollTop =
          window.pageYOffset || document.documentElement.scrollTop;
        const windowHeight = window.innerHeight;
        const documentHeight = document.documentElement.scrollHeight;

        if (scrollTop + windowHeight >= documentHeight - 100) {
          this.loadMore();
        }
      }, 100);
    },

    // 设置时间筛选 - 修复重复调用问题
    setDateValid(valid) {
      if (this.dateValid !== valid) {
        this.dateValid = valid;
        this.currentPage = 1;
        this.getConsultantList(false);
      }
    },

    // 设置分类筛选
    setCategoryFilter(category) {
      if (this.activeCategory !== category) {
        this.activeCategory = category;
        this.currentPage = 1;
        this.getConsultantList(false);
      }
    },

    goToConsultantDetail(consultantId) {
      this.cleanupEvents(); // 跳转前移除事件监听
      this.$router.push({
        name: "预约详情",
        query: { consultantId },
      });
    },

    handleBack() {
      this.cleanupEvents(); // 返回时也清理
      this.$router.back();
    },

    checkScrollIndicator() {
      const filterElement = this.$refs.categoryFilter;
      if (filterElement) {
        this.showScrollIndicator =
          filterElement.scrollWidth > filterElement.clientWidth;
      }
    },

    // 图片加载失败处理
    handleImageError(event) {
      event.target.src = "https://via.placeholder.com/80x80?text=头像";
    },
  },
};
</script>
<style scoped>
.consultation-page {
  max-width: 500px;
  margin: 0 auto;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  padding-bottom: 20px;
}

/* 导航栏样式 */
.navbar {
  max-width: 500px;
  margin-bottom: 20px;

  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-back:hover {
  background: #e0e0e0;
}

.nav-title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.nav-placeholder {
  width: 40px;
}

.header-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.filter-section {
  padding: 20px;
  background: white;
  margin: 0 15px 20px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.time-filter {
  display: flex;
  background: #f0f4f8;
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 15px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  gap: 10px;
}

.filter-btn {
  border: none;
  padding: 10px 20px;
  background: transparent;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  flex: 1;
  font-weight: 500;
  color: #64748b;
}

.filter-btn.active {
  background: linear-gradient(135deg, #176bf2 0%, #8bb3f9 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(37, 117, 252, 0.4);
}

.filter-toggle-btn {
  border: none;
  padding: 10px 15px;
  background: #176bf2;
  color: white;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 80px;
  justify-content: center;
}

.filter-toggle-btn:hover {
  background: #1256cc;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(23, 107, 242, 0.3);
}

/* 筛选面板样式 */
.filter-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

.filter-panel.active {
  visibility: visible;
  opacity: 1;
}

.filter-panel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.filter-panel-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 85%;
  max-width: 400px;
  height: 100%;
  background: white;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.filter-panel.active .filter-panel-content {
  transform: translateX(0);
}

.filter-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.filter-panel-header h3 {
  margin: 0;
  color: #1e293b;
  font-size: 1.2rem;
}

.close-btn {
  border: none;
  background: none;
  font-size: 1.2rem;
  color: #64748b;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: background 0.3s;
}

.close-btn:hover {
  background: #e2e8f0;
}

.filter-panel-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.filter-item {
  margin-bottom: 25px;
}

.filter-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.filter-input,
.filter-select {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
  background: white;
}

.filter-input:focus,
.filter-select:focus {
  outline: none;
  border-color: #176bf2;
  box-shadow: 0 0 0 3px rgba(23, 107, 242, 0.1);
}

.gender-filter {
  display: flex;
  gap: 15px;
}

.gender-option {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.gender-radio {
  margin: 0;
}

.gender-label {
  font-size: 14px;
  color: #64748b;
}

.filter-panel-footer {
  display: flex;
  gap: 15px;
  padding: 20px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.reset-btn,
.confirm-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.reset-btn {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.reset-btn:hover {
  background: #e2e8f0;
}

.confirm-btn {
  background: linear-gradient(135deg, #176bf2 0%, #8bb3f9 100%);
  color: white;
}

.confirm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(23, 107, 242, 0.3);
}

.category-filter-container {
  position: relative;
}

.category-filter {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 10px;
  padding-bottom: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-filter::-webkit-scrollbar {
  display: none;
}

.category-btn {
  border: none;
  background: #f1f5f9;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
  color: #475569;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  white-space: nowrap;
  flex-shrink: 0;
}

.category-btn.active {
  background: linear-gradient(135deg, #176bf2 0%, #8bb3f9 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 154, 158, 0.3);
}

.loading-container,
.loading-more,
.no-more-data,
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #64748b;
}

.loading-container {
  flex-direction: column;
  padding: 40px 20px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #176bf2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.loading-spinner.small {
  width: 20px;
  height: 20px;
  border-width: 2px;
  margin-bottom: 0;
  margin-right: 10px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.empty-state {
  flex-direction: column;
  padding: 60px 20px;
}

.empty-state i {
  font-size: 60px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.consultant-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 15px;
}

.consultant-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #f1f5f9;
  transition: transform 0.3s, box-shadow 0.3s;
}

.consultant-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* 新的布局结构 */
.card-content {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.left-section {
  flex-shrink: 0;
}

.avatar-container {
  position: relative;
  width: 80px;
  height: 80px;
}

.consultant-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e2e8f0;
}

.online-indicator {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid white;
}

.online-indicator.online {
  background: #10b981;
}

.online-indicator.offline {
  background: #6b7280;
}

.middle-section {
  flex: 1;
  min-width: 0;
}

.name-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.consultant-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.consultant-level {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #8b7500;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.info-icon {
  color: #176bf2;
  font-size: 0.9rem;
  width: 16px;
}

.info-text {
  font-size: 0.85rem;
  color: #64748b;
}

.expertise-section,
.message-section {
  margin-bottom: 12px;
}

.section-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
  display: block;
}

.expertise-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.expertise-tag {
  background: #e0f2fe;
  color: #0369a1;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.consultant-message {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.4;
  margin: 4px 0 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.right-section {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}

.city-info {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  padding: 8px 5px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  justify-content: center;
}

.city-icon {
  color: #ef4444;
  font-size: 0.9rem;
}

.city-text {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

/* 底部预约区域 */
.bottom-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.availability-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fastest-time {
  display: flex;
  align-items: center;
  gap: 6px;
}

.time-label {
  font-size: 0.9rem;
  color: #64748b;
}

.time-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #065f46;
}

.availability-tag {
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.availability-tag.available {
  background: #d1fae5;
  color: #065f46;
}

.availability-tag.unavailable {
  background: #fee2e2;
  color: #991b1b;
}

.book-btn {
  background: linear-gradient(135deg, #176bf2 0%, #8bb3f9 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(37, 117, 252, 0.3);
  min-width: 120px;
}

.book-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(37, 117, 252, 0.4);
}

.book-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .filter-section {
    margin: 0 10px 15px;
    padding: 15px;
  }

  .time-filter {
    flex-wrap: wrap;
  }

  .filter-toggle-btn {
    min-width: 70px;
    padding: 8px 12px;
  }

  .card-content {
    flex-direction: flex;
    gap: 12px;
  }

  .left-section {
    display: flex;
    justify-content: center;
  }

  .avatar-container {
    width: 100px;
    height: 100px;
  }

  .right-section {
    justify-content: center;
    margin-top: 8px;
  }

  .bottom-section {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .availability-info {
    justify-content: space-between;
  }

  .book-btn {
    width: 100%;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .consultant-list {
    padding: 0 10px;
  }

  .filter-panel-content {
    width: 90%;
  }
}

@media (max-width: 480px) {
  .name-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .consultant-name {
    font-size: 1.2rem;
  }

  .avatar-container {
    width: 80px;
    height: 80px;
  }

  .time-filter {
    flex-direction: flex;
  }

  .filter-btn,
  .filter-toggle-btn {
    margin-bottom: 5px;
  }
}
</style>
